<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
    
<%@ page import="java.util.List"%>
<%@ page import="sg.edu.nus.iss.phoenix.schedule.entity.WeeklySchedule" %>
<%@ page import="sg.edu.nus.iss.phoenix.schedule.entity.ProgramSlot" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
String startDateValue = "Monday";
String endDateValue = "Monday";
String startTimeMinValue ="00";
String startHourValue="1";
String endTimeMinValue="00";
String endHourValue="1";
String startTime = "00:00";
String endTime = "00:00";

request.getSession().setAttribute("weeklySchedule", null);
%>
<html>
<head>
<link href="<c:url value='/css/main.css'/>" rel="stylesheet" type="text/css"/>
<fmt:setBundle basename="ApplicationResources" />
<title> <fmt:message key="title.setuprp"/> </title>
<SCRIPT language="javascript">
/* function addRow(tableID) {
 		//alert(document.getElementById('start_week_day').value);
            var table = document.getElementById(tableID);
 
            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);
 
					// list of start day - start_week_day
		// list of startTime Hours - start_time_hh
		// list of startTime Minutes - start_time_mm
		// list of end Time hours - end_time_hh
		// list of end Time minutes - end_time_mm
		// list of end day - end_week_day
		// list radio programs - programs_list
		// list presenters - presenter_list
		// list producers - producer_list
		
			var cell1 = row.insertCell(0);
            cell1.innerHTML = rowCount;
			
			var cell2 = row.insertCell(1);
	        var element1 = document.createElement("input");
            element1.type = "text";
			element1.name = "start_week_day";
			element1.value = document.getElementById('start_week_day').value;
			cell2.appendChild(element1);
			
			var cell3 = row.insertCell(2);
	        var element2 = document.createElement("input");
            element2.type = "text";
			element2.name = "start_time_hh";
			element2.value = document.getElementById('start_time_hh').value;
			cell3.appendChild(element2);
			
			var cell4 = row.insertCell(3);
	        var element3 = document.createElement("input");
            element3.type = "text";
			element3.name = "start_time_mm";
			element3.value = document.getElementById('start_time_mm').value;
			cell4.appendChild(element3);
			
			var cell5 = row.insertCell(4);
	        var element4 = document.createElement("input");
            element4.type = "text";
			element4.name = "end_time_hh";
			element4.value = document.getElementById('end_time_hh').value;
			cell5.appendChild(element4);
			
			var cell6 = row.insertCell(5);
	        var element5 = document.createElement("input");
            element5.type = "text";
			element5.name = "end_time_mm";
			element5.value = document.getElementById('end_time_mm').value;
			cell6.appendChild(element5);
			
			
			var cell7 = row.insertCell(6);
	        var element6 = document.createElement("input");
            element6.type = "text";
			element6.name = "programs_list";
			element6.value = document.getElementById('programs_list').value;
			cell7.appendChild(element6);
			
			var cell8 = row.insertCell(7);
	        var element7 = document.createElement("input");
            element7.type = "text";
			element7.name = "presenter_list";
			element7.value = document.getElementById('presenter_list').value;
			cell8.appendChild(element7);
			
			
			var cell9 = row.insertCell(8);
	        var element8 = document.createElement("input");
            element8.type = "text";
			element8.name = "producer_list";
			element8.value = document.getElementById('producer_list').value;
			cell9.appendChild(element8);
			
			
			
        }
 */        
 
 function addRow(tableID) {

	 
		// list of start day - start_week_day
		// list of startTime Hours - start_time_hh
		// list of startTime Minutes - start_time_mm
		// list of end Time hours - end_time_hh
		// list of end Time minutes - end_time_mm
		// list of end day - end_week_day
		// list radio programs - programs_list
		// list presenters - presenter_list
		// list producers - producer_list
	//	if(document.getElementById('programs_list').value == ''){
	//		alert("Program Is Null");
	//		return;
	//	}
		
	//	else if(document.getElementById('presenter_list').value == ''){
	//		alert("Presenter Is Null");
	//		return;
	//	}
		
	//	else if(document.getElementById('producer_list').value == ''){
	//		alert("Producer Is Null");
	//		return;
	//	}
		
		
	//	alert("Total elements "+document.getElementsByName("programs_list").length);
		
		//
		/*
		//document.getElementById('myform').elements;
			for(var i = 0; i <= rowCount ; i++) {
			
			
			//If the form element is a text input and the value is not an integer
			if(form.elements[i].type == "text" && 
			   parseInt(form.elements[i].value) != form.elements[i].value) {
			  alert("Please enter an integer value"); //Replace this with whatever you want
													  //to do with invalid results
			  return false; //Stops the submit from continuing.
			}
		  }
		  return true;
		  
		  var selectM = document.createElement("select"), values = ["hi", "hello", "hola"];
		  for(var i = 0; i < values.length; ++i) {
			var opt = document.createElement("option");
			opt.value = values[i];
			opt.text = values[i];
			selectM.add(opt, null);       
}
		*/
		//
		
		
		 var table = document.getElementById(tableID);

         var rowCount = table.rows.length ;
         var row = table.insertRow(rowCount);
		 var cell1 = row.insertCell(0);
         cell1.innerHTML = rowCount ;
			
			var cell2 = row.insertCell(1);
	        var element1 = document.createElement("select"), values = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
			element1.name = "start_week_day";
			 for(var i = 0; i < values.length; i++) {
			var opt = document.createElement("option");
			opt.value = ""+(i+1);
			opt.text = values[i];
			element1.add(opt, null); 
			}
			cell2.appendChild(element1);
			
			var cell3 = row.insertCell(2);
	        var element2 = document.createElement("select"), hours = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"];
			element2.name = "start_time_hh";
			for(var i = 0; i < hours.length; i++) {
			var opt = document.createElement("option");
			opt.value = hours[i];
			opt.text = hours[i];
			element2.add(opt, null); 
			}
			cell3.appendChild(element2);
			
			var cell4 = row.insertCell(3);
	        var element3 = document.createElement("select"), minutes = ["00", "30"];
			element3.name = "start_time_mm";
			for(var i = 0; i < minutes.length; i++) {
			var opt = document.createElement("option");
			opt.value = minutes[i];
			opt.text = minutes[i];
			element3.add(opt, null); 
			}
			cell4.appendChild(element3);
			
			var cell5 = row.insertCell(4);
	        var element4 = document.createElement("select"),  end_hours = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"];
			element4.name = "end_time_hh";
			for(var i = 0; i < end_hours.length; i++) {
			var opt = document.createElement("option");
			opt.value = end_hours[i];
			opt.text = end_hours[i];
			element4.add(opt, null); 
			}
			cell5.appendChild(element4);
			
			var cell6 = row.insertCell(5);
	        var element5 = document.createElement("select"), end_minutes = ["00", "30"];
			element5.name = "end_time_mm";
			for(var i = 0; i < minutes.length; i++) {
			var opt = document.createElement("option");
			opt.value = end_minutes[i];
			opt.text = end_minutes[i];
			element5.add(opt, null); 
			}
			//element5.value = document.getElementById('end_time_mm').value;
			cell6.appendChild(element5);
			
			
			var cell7 = row.insertCell(6);
	      	var element6 = document.createElement("input");
         	element6.type = "text";
			element6.name = "programs_list";
			element6.id="programs_list_"+rowCount;
			//element6.value = document.getElementById('programs_list').value;
			element6.onclick = function(){
    			$("#rpLabel").val($(this).attr("id"));
    			$("#rpId").val($(this).attr("id")+"ID");
    			
    			window.open('searchrp.jsp', '_blank', 'height=400, width=600');
    			};
    		cell7.appendChild(element6);
    			
    		var element6hidden = document.createElement("input");
    		element6hidden.type = "hidden";
    		element6hidden.id="programs_list_"+rowCount+"ID";
			cell7.appendChild(element6hidden);
			
			
			var cell8 = row.insertCell(7);
	        var element7 = document.createElement("input");
         	
	        element7.type = "text";
			element7.name = "presenter_list";
			element7.id="presenter_list"+rowCount;
			//element7.value = document.getElementById('presenter_list').value;
			element7.onclick = function(){
    			$("#presenterLabel").val($(this).attr("id"));
    			$("#presenterId").val($(this).attr("id")+"ID");
    			
    			window.open('presenterProducer.jsp', '_blank', 'height=400, width=600');
    			};
    			var element7hidden = document.createElement("input");
    			element7hidden.type = "hidden";
    			element7hidden.id="presenter_list"+rowCount+"ID";

    			
			cell8.appendChild(element7);
			cell8.appendChild(element7hidden);
			
			
			var cell9 = row.insertCell(8);
	        var element8 = document.createElement("input");
         element8.type = "text";
			element8.name = "producer_list";
			//element8.value = document.getElementById('producer_list').value;
			cell9.appendChild(element8);
			
     }
        function addSelection(selection)
        {	
        	var temp = document.getElementById("mySelection");
        	var element = document.createElement("input");
	        element.type = "hidden";
			element.name = "selection";
			element.value = selection;
			temp.appendChild(element);
        }
        
        $(function() {  
   		 
        	 $('input.programs_list').click(function() {
       			 alert($(this).attr("id"));
       			 alert(($(this).attr("id")+"ID"));
       			$("#rpLabel").val($(this).attr("id"));
       			$("#rpId").val($(this).attr("id")+"ID");
       			
       			window.open('searchrp.jsp', '_blank', 'height=400, width=600');
       		});

        
   		 $("input:text[name=programs_list]").click(function() {
   			 alert($(this).attr("id"));
   			 alert(($(this).attr("id")+"ID"));
   			$("#rpLabel").val($(this).attr("id"));
   			$("#rpId").val($(this).attr("id")+"ID");
   			
   			window.open('searchrp.jsp', '_blank', 'height=400, width=600');
   		});
        });

</Script>


</head>
<body>
<form action="${pageContext.request.contextPath}/controller/createSchedule" method=post>
<input type="hidden" id="rpId">
<input type="hidden" id="rpLabel">
<input type="hidden" id="presenterId">
<input type="hidden" id="presenterLabel">
<input type="hidden" id="roleId" value="2">
<body> 
	<br/><br/>

        <h1><fmt:message key="label.schedulep"/></h1>
        <c:url var="url" scope="page" value="/pages/setuprp.jsp">
        		<c:param name="name" value=""/>
                <c:param name="insert" value="true"/>
        </c:url>
        <!--<fmt:message key="caption.maintainSchedule.welcome" />-->
        <a href="/phoenixradio/pages/crudSchedule.jsp"><fmt:message key="label.schedulep.add"/></a>
        |
        <a href="/phoenixradio/pages/modifySchedule.jsp"  onclick="window.open('reviewScheduledProgram.jsp', '_blank', 'height=300, width=300');"><fmt:message key="label.schedulep.edit" /></a>
        |
        <a href="/phoenixradio/pages/copySchedule.jsp"  onclick="window.open('reviewScheduledProgram.jsp', '_blank', 'height=300, width=300');"><fmt:message key="label.schedulep.copy" /></a>
        |
        <a href="/phoenixradio/pages/deleteSchedule.jsp" onclick="window.open('reviewScheduledProgram.jsp', '_blank', 'height=300, width=300');"><fmt:message key="label.schedulep.delete" /></a>
        <br/><br/>
        <fmt:message key="label.schedulep.week" />
        	<select name="week_number">
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>
				<option value="6">6</option>
				<option value="7">7</option>
				<option value="8">8</option>
				<option value="9">9</option>
				<option value="10">10</option>
				<option value="11">11</option>
				<option value="12">12</option>
				<option value="13">13</option>
				<option value="14">14</option>
				<option value="15">15</option>
				<option value="16">16</option>
				<option value="17">17</option>
				<option value="18">18</option>
				<option value="19">19</option>
				<option value="20">20</option>
				<option value="21">21</option>
				<option value="22">22</option>
				<option value="23">23</option>
			</select>
			
			<select name="annual_year">
			<option value="2012">2012</option>
			<option value="2013">2013</option>
			<option value="2014">2014</option>
			<option value="2015">2015</option>
			</select>
			<br>
	  	


	<!--	<table>
		<tr bgcolor="">
			<td align=center colspan=2>
			<c:choose>
			<c:when test="${not empty errorMessage}">
								<p class="bodysmallred">${errorMessage}</p>
							</c:when>
			</c:choose>
			
		</tr>
		</table> -->
        
       	<table id="dataTable" class="borderAll">
			<tr>
				<th>Row id </th>
				<th> Day</th>
                <th> Start HH </th>
				<th> Start MM </th>
				<th> End HH </th>
				<th> End MM </th>
				<th> Radio Program </th>
				<th> Presenter </th>
				<th> Producer </th>
			</tr>
       <!--	<c:forEach var="programSlot" items="${weeklySchedule.programSlotsforWeek}" varStatus="status">
				<tr class="${status.index%2==0?'even':'odd'}">
					<td class="nowrap">${programSlot.startTime}</td>
					<td class="nowrap">${programSlot.startTime}</td>
					<td class="nowrap">${programSlot.endTime}</td>
					<td class="nowrap">${programSlot.endTime}</td>
					<td class="nowrap">${programSlot.radioProgramId}</td>
					<td class="nowrap">${programSlot.presenterId}</td>
					<td class="nowrap">${programSlot.producerId}</td>
				</tr>
			</c:forEach>
			

			
			
				<tr class="${status.index%2==0?'even':'odd'}">
					<td class="nowrap">${programSlot.startTime}</td>
					<td class="nowrap">${programSlot.startTime}</td>
					<td class="nowrap">${programSlot.endTime}</td>
					<td class="nowrap">${programSlot.endTime}</td>
					<td class="nowrap">${programSlot.radioProgramId}</td>
					<td class="nowrap">${programSlot.presenterId}</td>
					<td class="nowrap">${programSlot.producerId}</td>
				</tr> -->
				
				
       	</table>
		<input type="button" value="Add" onClick="addRow('dataTable');">
		<input type="reset" value="Clear Fields">
		<span id="mySelection"></span>
       	<input type="Submit" value="Save" onClick= "addSelection('1');" >

			<c:choose>
			<c:when test="${not empty DISPLAY_MESSAGE}">
								<p class="bodysmallred">${DISPLAY_MESSAGE}</p>
							</c:when>
			</c:choose>

</form>   

</body>

</html>